<template>
	<div class="home-card">
		<div class="home-card-header">
			<div class="home-card-price">
				<div class="home-card-state">
					月定制
				</div>
				<div class="home-card-num">
					<span class="circle"></span>
					<span class="price">2999</span>
				</div>
			</div>
			<img class="home-card-img" src="https://yami.yamichefs.cn/yaminew/app/admin/yami/Uploads/goods/5bb08e25a20ad.jpg" />
		</div>
		<div class="homde-card-middle">
			出海季，最鲜的胶东水饺
		</div>
		<div class="homde-card-bottom">
			厨师单品 | 名厨外卖
		</div>
	</div>
</template>

<script>
	export default {
		props: ["goodsTypes"],
		data() {
			return {}
		},
		mounted() {
			console.log(this.goodsTypes)
		},
		created() {

		},
		methods: {},

	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	.home-card {
		.home-card-header {
			width: 670px;
			height: 404px;
			position: relative;
			margin-bottom: 32px;
			.home-card-price {
				position: absolute;
				right: -16px;
				bottom: 40px;
				background-color: #000000;
				color: #FFFFFF;
				.home-card-state{
					padding: 0 10px;
					height: 56px;
					font-size: 32px;
					line-height: 56px;
					background-color: pink;
				}
				.home-card-num {
					padding: 0 10px;
					display: flex;
					align-items: center;
					height: 56px;
					.circle {
						vertical-align: top;
						display: inline-block;
						width: 10px;
						height: 10px;
						border: 2px solid #f00;
						border-radius: 50%;
						margin-right: 10px;
					}
					.price {
						vertical-align: top;
						display: inline-block;
						color: #fff;
						font-size: 26px;
						letter-spacing: 1.6px;
						line-height: 56px;
					}
				}
			}
			.home-card-img {
				width: 100%;
				height: 100%;
			}
		}
		.homde-card-middle {
			font-size: 40px;
			color: #4A4A4A;
			margin-bottom: 14px;
		}
		.homde-card-bottom {
			font-size: 28px;
			color: #9B9B9B;
		}
	}
</style>